<template>
	<view>
		<view class="content-box" v-if="info.guide_topic && info.guide_topic.content">
			<view class="main-basic-name ">任务攻略</view>
			<view class="strategy-box" v-if="info.guide_topic.content">
				<image :src="info.guide_topic.cover_url" mode="aspectFill" class="left-img"
					v-if="info.guide_topic.cover_url">
				</image>
				<view class="right-content">
					<view class="content">{{info.guide_topic.content}}</view>
					<van-button color="#F1F3F6" custom-style="color:#8A8F99;height:40rpx;font-size:20rpx" size="small"
						@click="totopicDetail(info.guide_topic.id)">查看详情</van-button>
				</view>
			</view>
		</view>
		<view class="content-box profit-content">
			<view class="profit-item">市场参考价：<text>{{info.order_price}}元</text></view>
			<view class="profit-item">结算模式：<text>{{info.fee_mode_name}}</text></view>
			<view class="profit-item">任务形式：<text>{{info.task_types_desc.join(',')}}</text></view>
		</view>
		<view class="content-box commission-box" v-if="info.task_types.length>0">
			<view class="main-basic-name" style="margin-bottom: 24rpx;">佣金说明</view>
			<view class="table-item" :style="'grid-template-columns:repeat('+(info.task_types.length+1)+', 1fr)'">
				<!-- 1-客资，2-任务反馈，4-成交订单 -->
				<view class="table-th boder-left">账号等级</view>
				<view class="table-th" v-if="show_cj">合作成本价</view>
				<view class="table-th" v-if="show_clue">客资佣金</view>
				<view class="table-th" v-if="show_task">推广佣金</view>
			</view>
			<view v-for="(item,index) in info.earn_configs" :key="item.id">
				<view class="table-item" :style="'grid-template-columns:repeat('+(info.task_types.length+1)+', 1fr)'">
					<view class="table-th boder-left"
						:class="index === info.earn_configs.length -1 ? 'boder-bottom' : ''">
						Lv{{item.level}}</view>
					<view class="table-td" :class="index === info.earn_configs.length -1 ? 'boder-bottom' : ''"
						v-if="show_cj">
						{{item.order_price_rate}}元
					</view>
					<view class="table-td" :class="index === info.earn_configs.length -1 ? 'boder-bottom' : ''"
						v-if="show_clue">
						{{item.clue_price}}元/个
					</view>
					<view class="table-td" :class="index === info.earn_configs.length -1 ? 'boder-bottom' : ''"
						v-if="show_task">
						{{item.promo_price}}元/个
					</view>
				</view>

			</view>
		</view>
		<view class="content-box desc-box">
			<rich-text :nodes="info.body"></rich-text>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			info: {
				typeof: Object,
				default: {}
			}
		},
		data() {
			return {};
		},
		computed: {
			show_clue() {
				return this.info.task_types.includes(1)
			},
			show_task() {
				return this.info.task_types.includes(2)
			},
			show_cj() {
				return this.info.task_types.includes(4)
			},
		},
		methods: {
			totopicDetail(id) {
				uni.navigateTo({
					url: '/pages/index/talkDetail/talkDetail?isUser=' + false + '&id=' + id
				})
			}
		}
	}
</script>

<style lang="scss">
	.strategy-box {
		margin-top: 24rpx !important;
		display: flex;

		.left-img {
			width: 123rpx;
			height: 164rpx;
			border-radius: 4rpx 4rpx 4rpx 4rpx;
			margin-right: 24rpx;
			flex-shrink: 0;
		}

		.right-content {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			height: 150rpx;

			.content {
				font-size: 30rpx;
				color: #161616;
				@include fx-text-multiline(2);
			}
		}
	}

	.profit-content {
		margin-top: 16rpx !important;

		.profit-item {
			font-size: 26rpx;
			color: #8A8F99;
			margin-top: 24rpx;

			text {
				color: #161616;
			}
		}

		.profit-item:first-child {
			margin-top: 0;
		}

	}

	.commission-box {
		margin-top: 16rpx !important;

		.table-item {
			display: grid;
			grid-template-columns: 1fr 1fr 1fr 1fr;
			text-align: center;
			height: 72rpx;
			line-height: 72rpx;
			background: #fff;


			.table-td,
			.table-th {
				border-top: 1rpx solid #E2E2E2;
				border-right: 1rpx solid #E2E2E2;
			}

			.table-th {
				background: #F2F2F2;
			}
		}

		.boder-left {
			border-left: 1rpx solid #E2E2E2;
		}

		.boder-bottom {
			border-bottom: 1rpx solid #E2E2E2;
		}
	}

	.desc-box {
		margin-top: 16rpx !important;
		// padding-top: 0 !important;
		font-size: 30rpx;
		color: #333333;
	}
</style>